<template>
  <div class="nav-bg flex-fill">
    <ul class="nav flex-column">
      <li class="nav-item py-1" v-for="item in menus" :key="item.id">
        <router-link
          class="nav-link text-white-50 d-flex align-items-center cursor"
          aria-current="page"
          :to="item.routeName ? { name: item.routeName } : item.path"
        >
          <!-- <i :class="[getIcon(item), 'pe-3 text-light']"></i>{{ item.name }} -->
          <i></i>{{ item.name }}
        </router-link>
      </li>
      <!-- <li class="nav-item">
        <router-link class="nav-link" :to="{ name: 'users' }"
          >用户管理</router-link
        >
      </li>
      <li class="nav-item">
        <router-link class="nav-link" :to="{ name: 'roles' }"
          >角色管理</router-link
        >
      </li>
      <li class="nav-item">
        <router-link
          class="nav-link"
          :to="{ name: 'menus' }"
          tabindex="-1"
          aria-disabled="true"
          >菜单管理</router-link
        >
      </li> -->
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import type { MenuItem } from "./types/SidebarNav";

export default defineComponent({
  props: {
    menus: {
      type: Array as PropType<Array<MenuItem>>,
      default: () => [] as MenuItem[],
    },
  },
  setup() {
    return {
    };
  },
});
</script>

<style scoped></style>
